/**
 * #info
 *
 *@author   wuwg
 *@createTime   2018/03/20
 *@updateTime   2018/03/21
 *@description  rate  component  评分组件
 */

/**
 * #item
 *
 * @type        aty-rate
 * @cn          评分
 * @nameprop   label
 * @menu        表单
 * @stPlugin    true
 * @stContainer false
 * @children    []
 * @mixins      [./components/mixins/form-item-props.js]
 */

import config from '../../../config/config.js'

// components
import FormItem from '../form-item/index.vue'
// mixins
import FormItemProps from '../../../mixins/form-item-props.js'
import Emitter from '../../../mixins/emitter.js'
import Locale from '../../../mixins/locale.js'
// prefix
const prefixCls = config.prefix + '-rate'
// module
const module = {
  name: config.prefix + '-rate',
  mixins: [Locale, Emitter, FormItemProps],
  components: { FormItem },
  props: {
    /**
     * #property
     *
     * @name    index
     * @cn      索引值
     * @group   基本属性
     * @type    null
     * @description 索引值，循环中可能用到，用于查找是哪条数据
     */
    index: {
      type: null //  null 代表任意类型,
    },
    /**
     * #property
     *
     * @name    name
     * @cn      属性名称
     * @group   基本属性
     * @type    string
     * @description 值对应的属性名
     */
    name: {
      type: String
    },
    /**
     * #property
     *
     * @name    count
     * @cn      总数
     * @group   基本属性
     * @type    number
     * @bind  must
     * @value  5
     * @description 星的总个数
     */
    count: {
      type: Number,
      default: 5
    },
    /**
     * #property
     *
     * @name    value
     * @cn      值
     * @group   基本属性
     * @type    number
     * @bind  must
     * @value  0
     * @description 当前 star 数
     */
    value: {
      type: Number,
      default: 0
    },
    /**
     * #property
     *
     * @name    allowHalf
     * @cn      是否允许半选
     * @group   控制
     * @type    boolean
     * @value  false
     * @description 是否允许半选
     */
    allowHalf: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name    disabled
     * @cn      是否禁用
     * @group   控制
     * @type    boolean
     * @value  false
     * @description 该输入框是否禁用
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name    showText
     * @cn      是否显示文本
     * @group   控制
     * @type    boolean
     * @value  false
     * @description 是否显示文本
     */
    showText: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name    childComponentsName
     * @cn      formItem包含的子组件名
     * @group   基本属性
     * @type    array
     * @bind    must
     * @description form-item组件广播事件会用到
     */
    childComponentsName: {
      type: Array,
      default () {
        return [
          config.prefix + '-rate'
        ]
      }
    }
  },
  data () {
    return {
      prefixCls: prefixCls,
      hoverIndex: -1,
      isHover: false,
      isHalf: this.allowHalf && this.value.toString().indexOf('.') >= 0,
      currentValue: this.form && this.form.value && this.prop ? this.form.value[this.prop] : this.value,
      scope: {
        className: config.prefix + '-rate'
      }
    }
  },
  watch: {
    value (val) {
      this.currentValue = val
    },
    // 当前的值
    currentValue (val) {
      this.setHalf(val)
    }
  },
  computed: {
    classes () {
      return [
                `${prefixCls}`,
                {
                  [`${prefixCls}-disabled`]: this.disabled
                }
      ]
    }
  },
  methods: {
    starCls (value) {
      const hoverIndex = this.hoverIndex
      const currentIndex = this.isHover ? hoverIndex : this.currentValue

      let full = false
      let isLast = false

      if (currentIndex >= value) full = true

      if (this.isHover) {
        isLast = currentIndex === value
      } else {
        isLast = Math.ceil(this.currentValue) === value
      }
      return [
                `${prefixCls}-star`,
                {
                  [`${prefixCls}-star-full`]: (!isLast && full) || (isLast && !this.isHalf),
                  [`${prefixCls}-star-half`]: isLast && this.isHalf,
                  [`${prefixCls}-star-zero`]: !full
                }
      ]
    },
    handleMousemove (value, event) {
      if (this.disabled) {
        return
      }
      this.isHover = true
      if (this.allowHalf) {
        const type = event.target.getAttribute('type') || false
        this.isHalf = type === 'half'
      } else {
        this.isHalf = false
      }
      this.hoverIndex = value
    },
    handleMouseleave () {
      if (this.disabled) return
      this.isHover = false
      this.setHalf(this.currentValue)
      this.hoverIndex = -1
    },
    setHalf (val) {
      this.isHalf = this.allowHalf && val.toString().indexOf('.') >= 0
    },
    handleClick (value, event) {
      if (this.disabled) {
        return
      }
      if (this.isHalf) {
        value -= 0.5
      }
      const oldValue = this.currentValue
      // 设置当前的值
      this.currentValue = value
      // v-model
      this.$emit('input', this.currentValue)
      // 发送消息到父级
      /**
       * #event
       *
       * @name change
       * @param oldValue 变化前的值
       * @param newValue  变化后的值
       * @param  event event
       * @description
       * @body
       */
      this.$emit('change', oldValue, this.currentValue, event)
      this.dispatchEvent('change')
    }
  },
  updated () { },
  created () { },
  mounted () { }
}
export default module
